<template>
  <div :style="{minHeight: '40px', lineHeight: '40px'}">
    <Row>
      <Col :xs="16" :sm="19" :md="20" :lg="21">
        <Row>
          <slot />
        </Row>
      </Col>
      <Col :xs="8" :sm="5" :md="4" :lg="3" style="text-align: right">
        <Button v-if="shouldShowShowMore && !showMore" @click="showMore=true">更多</Button>
        <Button type="primary" label="small" @click="handleSearch">搜索</Button>
      </Col>
    </Row>
    <Row v-if="showMore">
      <Col :xs="16" :sm="19" :md="20" :lg="21">
        <Row>
          <slot name="more" />
        </Row>
      </Col>
      <Col :xs="8" :sm="5" :md="4" :lg="3" style="text-align: right">
        <Button v-if="shouldShowShowMore && showMore" @click="showMore=false">收起</Button>
      </Col>
    </Row>
  </div>
</template>

<script>
import { Row, Col, Button } from "view-design";
export default {
  name: "SearchBarBox",
  components: {
    Row,
    Col,
    Button
  },
  model: {
    event: ["onSearch"]
  },
  props: {
    showMore: {
      type: Boolean,
      default: false
    },
    /** vuex module名称 */
    namespace: {
      type: String,
      required: false
    }
  },
  data: function() {
    return {};
  },
  computed: {
    /** 是否应该展示更多 */
    shouldShowShowMore: function() {
      let moreSlot = this.$slots.more;
      return moreSlot ? true : false;
    }
  },
  methods: {
    handleSearch: function() {
      let result = this.$emit("onSearch");
      if (this.namespace) {
        this.$store.dispatch(`${this.namespace}/query`, {
          limit: {
            currentPage: 1
          }
        });
      }
    }
  }
};
</script>

<style>
</style>
